<!doctype html>
<html lang="en" class="dark">

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>MoQ Demo</title>

	<link rel="stylesheet" href="index.css">
	<link rel="icon" type="image/svg+xml" href="/favicon.svg">
</head>

<body class="dark:bg-black">
	<!-- Show if this browser supports everything we need. -->
	<hang-support show="partial"></hang-support>

	<!--
	 	This is a simple element to render each broadcast in a grid.
		It will discover any published broadcasts and render them.
		You can also use `path=meeting-abc` to only match broadcasts matching that prefix.

		The relay url is loaded from an environment as it contains a generated JWT authentication token.
		Feel free to hard-code it if you have public access configured, like `url="https://relay.moq.dev/anon"`
		NOTE: `http` performs an insecure certificate check. You must use `https` in production.
	-->
	<hang-meet url="%VITE_RELAY_URL%">
		<!--
			If a `hang-publish` element is nested, then it will inherit the `url` attribute.
			It also won't be downloaded, instead rendered in the grid if `preview` is set.
			This is rather limited but so is this Web Component; use the JS API for more control.
		-->
		<hang-publish path="me" audio video controls preview></hang-publish>
	</hang-meet>

	<h3>Other demos:</h3>
	<ul>
		<li><a href="index.html">Watch a single broadcast.</a></li>
		<li><a href="publish.html">Publish a single broadcast.</a></li>
		<li><a href="support.html">Check browser support.</a></li>
	</ul>

	<h3>Tips:</h3>
	<p>
		Broadcasts are discovered/announced via the relay server; no need for a separate signaling server.
		You could download your own broadcast... or save some bandwidth and perform a local preview.
		You still get a signal informing you when other viewers can see your broadcast.
	</p>
	<p>
		A "room" of broadcasts is little more than a shared prefix.
		If you publish to <code>demo/foo</code> and <code>demo/bar</code>, then using <code>demo</code> will render both.
		You can provide the path of the broadcast via the <code>path</code> attribute.
	</p>
	<hr />
	<p>
		I hightly recommend using the Javascript API instead of the Web Component, even if the API is still evolving.
		There's just too much business logic involved in determining how to render broadcasts.
		This demo uses the most basic grid layout with near-zero styling.
		It's ugly on purpose.
		There's a million different ways to render a collection of broadcasts and it's up to your application to decide.
	</p>
	<p>
		My application renders to a shared canvas instead.
		If you're interested in the details, it's similar to the <code class="language-javascript">VideoRenderer</code> class.
		You should instead use this library to discover broadcasts, download them, and perhaps render them.
	</p>
</body>

<script type="module" src="meet.ts"></script>

</html>
